<template>
<div class="login">
  <IndexHeader></IndexHeader>
  <div class="login-header">
    <div class="login-bg">
      <div class="login-header-title">
        <p class="small-text">薪税师/薪酬管理职业技能在线教育品牌</p>
        <p class="big-text">财才云教育</p>
      </div>
      <div class="left-bg">

      </div>
      <div class="right-bg">

      </div>
      <div class="right-bg-big">

      </div>
      <div class="form-left-img">

      </div>
      <div class="login-form-div">
        <div class="title">登录您的账号</div>
        <div class="form">
          <el-form
              ref="ruleFormRef"
              :label-position="labelPosition"
              :rules="LoginRules"
              label-width="100px"
              :model="loginForm"
              style="max-width: 460px"
          >
            <el-form-item label="机构代码" prop="org_code">
              <el-input v-model="loginForm.org_code" />
            </el-form-item>
            <el-form-item label="手机号"  prop="phone">
              <el-input v-model="loginForm.phone" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password" />
            </el-form-item>
            <el-form-item>
              <div style="display: flex;flex-direction: column">
                <el-checkbox v-model="radio1" label="1" size="large"><span style="display: flex;align-items: center">已同意<a @click="toYszc" style="color: #409eff">《隐私政策》</a>和<a @click="toZcxy" style="color: #409eff">《用户注册协议》</a></span></el-checkbox>
                <el-checkbox v-model="checked1" label="记住我" size="large" />
              </div>
            </el-form-item>
            <el-form-item>
              <div class="login-model">
                <div>
                  <span class="nopwd" @click="ForgotPassword">忘记密码?</span><el-button @click="loginSubmit(ruleFormRef)" class="login-button" type="danger">现在登录</el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
  <div class="login-section">
  <div class="bg-round">
  <div class="bg-phone">

  </div>
  </div>
    <div class="right-title">
      <div class="big-title">
        <div>
          <p class="big">财才云教育APP</p>
          <p class="small">抓住 “薪” 机遇，就上财才云教育！</p>
        </div>
        <div>
          <img width="57" src="../../assets/login/fj.png" alt="">
        </div>
      </div>
      <div class="small-text">
        <p>国际薪税师-拥有国际中国双视角复合型薪税服务人才</p>
        <p>薪酬管理人才-薪酬管理（含薪税服务）领域专家</p>
        <p>薪税师-薪税服务领域佼佼者</p>
      </div>
      <div>
        <img src="../../assets/login/erweima.png" alt="">
      </div>
<!--      <div style="display: flex">-->
<!--        <div>-->
<!--          <img width="190" src="https://img.js.design/assets/img/627e2db8192152fbd80af52f.jpg" alt="">-->
<!--        </div>-->
<!--        <div style="display: flex;flex-direction: column;margin-left: 43px;">-->
<!--          <div>-->
<!--            <el-button class="app-download" type="danger">-->
<!--              <img width="31" style="margin-right: 4px" src="../../assets/login/apple.png" alt="">-->
<!--              <span @click="iosDown">IOS下载</span>-->
<!--            </el-button>-->
<!--          </div>-->
<!--          <div>-->
<!--            <el-button class="app-download" type="danger">-->
<!--              <img width="31" style="margin-right: 4px" src="../../assets/login/anzhuo.png" alt="">-->
<!--              <span @click="azDown">安卓下载</span>-->
<!--            </el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
  <el-dialog v-model="privacyPolicy" :close-on-click-modal="false" :show-close="false">
    <template #title>
      <div style="display: flex;justify-content: center">
        <span style="text-align: center;color: rgba(51, 51, 51, 1);font-size: 36px;font-weight: 400;">隐私政策</span>
      </div>
    </template>
    <div class="privacyPolicyDiv">
      <p>本政策仅适用于上海财才网信息科技有限公司（以下简称“财经人才网”或“财才网”）的财才云教育APP软件（以下简称“财才云”）产品或服务，包括课程提供（包含但不限于课程视频、题库训练、平台实训、继续教育、答疑等）服务。</p>
      <p>最近更新日期：2022年4月13日。</p>
      <p>如果您有任何疑问、意见或建议，请通过以下联系方式与我们联系：</p>
      <p>电子邮件：service@chinarencai.net</p>
      <p>电　　话：021-62980135</p>
      <br>
      <p>本政策将帮助您了解以下内容：</p>
      <p>1、我们如何收集和使用您的个人信息</p>
      <p>2、我们如何使用 Cookie 和同类技术</p>
      <p>3、我们如何共享、转让、公开披露您的个人信息</p>
      <p>4、我们如何保护您的个人信息</p>
      <p>5、您的权利</p>
      <p>6、我们如何处理儿童的个人信息</p>
      <p>7、您的个人信息如何在全球范围转移</p>
      <p>8、本政策如何更新</p>
      <p>9、如何联系我们</p>
      <br>
      <p>财才网深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。同时，财才网承诺，我们将按业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。</p>
      <p>请在使用我们的产品（或服务）前，仔细阅读并了解本《隐私政策》。</p>
      <p>一、我们如何收集和使用您的个人信息</p>
      <p>个人信息是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。</p>
      <p>财才网仅会出于本政策所述的业务功能，收集和使用您的个人信息：</p>
      <br>
      <p>（一）为您提供课程提供（包含但不限于课程视频、题库训练、平台实训、继续教育、答疑等）服务</p>
      <p>1、注册成为用户。</p>
      <p>为完成创建账号，您需提供以下信息：您的用户名（手机号码）和密码。</p>
      <p>在注册过程中，如果您提供以下额外信息，将有助于我们给您提供更好的服务和体验：真实姓名、身份证件号码、地址信息、工作职位、公司、教育背景等，但如果您不提供这些信息，将不会影响使用本服务的基本功能。</p>
      <p>您提供的上述信息，将在您使用本服务期间持续授权我们使用。在您注销账号时，我们将停止使用并删除上述信息。</p>
      <p>上述信息将存储于中华人民共和国境内。当我们要将信息用于本政策未载明的其它用途时，会事先征求您的同意。</p>
      <p>当我们要将基于特定目的收集而来的信息用于其他目的时，会事先征求您的同意。</p>
      <br>
      <p>二、我们如何使用 Cookie 和同类技术</p>
      <p>（一）Cookie</p>
      <p>为确保网站正常运转，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。借助于 Cookie，网站能够存储您的偏好或购物篮内的商品等数据。</p>
      <p>我们不会将 Cookie 用于本政策所述目的之外的任何用途。您可根据自己的偏好管理或删除 Cookie。您可以清除计算机上保存的所有 Cookie，大部分网络浏览器都设有阻止 Cookie 的功能。但如果您这么做，则需要在每一次访问我们的网站时亲自更改用户设置。如需详细了解如何更改浏览器设置，请访问以下链接：
        &ltInternet Explorer&gt、&ltGoogle Chrome&gt、&ltMozilla Firefox&gt、&ltSafari&gt 和 &ltOpera&gt。
      </p>

    </div>
    <div style="display: flex;justify-content: center;margin-top: 20px" >
      <el-button type="primary" @click="privacyPolicy = false" round>已阅并同意该协议</el-button>
    </div>
  </el-dialog>
  <ForgotPasswordComponent @done="done" :dialogVisible="isForgotPassword"></ForgotPasswordComponent>
  <IndexFooter></IndexFooter>
</div>
</template>

<script>
import {login} from "@/api/api";
import IndexHeader from "@/components/IndexHeader";
import ForgotPasswordComponent from './ForgotPasswordComponent/index'
import {getCurrentInstance, reactive, ref,watch} from "vue";
import IndexFooter from "@/components/IndexFooter";
import Cookie from "js-cookie";
import router from "@/router";
import {ElMessage} from "element-plus";
import store from "@/store";
export default {
  name: "index",
  setup(){
    let privacyPolicy = ref(false)
    let isForgotPassword = ref(false)
    const labelPosition = ref('top')
    const radio1 = ref(false)
    const checked1 = ref(false);
    let ruleFormRef = ref(null)
    let loginForm = ref({
      org_code: '',
      phone: '',
      password: '',
    })
    checked1.value = Cookie.get('remember') ? true:false;
    if(Cookie.get('account')){
      loginForm.value = JSON.parse(Cookie.get('account'))
    }
    const validatePhone = (rule,value,callback) => {
      let phoneRule = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } else if (!phoneRule.test(value)) {
        callback(new Error("手机号码格式错误"))
      } else {
        callback()
      }
    }
    const done = (params) =>{
      isForgotPassword.value = params
    }
    const LoginRules = reactive({
      org_code: [
        { required: true, message: '请输入机构代码', trigger: 'blur' }
      ],
      phone: [
        {required: true, validator: validatePhone, trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ],
    })
    //登录
    const loginSubmit =  () => {
      ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          if(radio1.value){
            let {org_code,password,phone} = loginForm.value;
            let params = {phone:phone,password: password,code:org_code,platform:'web'}
            login(params).then(res =>{
              console.log(res)
              let token  = res.data.token;
              Cookie.set('token',token);
              if (token){
                store.commit('setToken',token)
              }
              if(checked1.value){
                Cookie.set('remember',JSON.stringify(true),{ expires: 7 });
                Cookie.set('account',JSON.stringify(loginForm.value),{ expires: 7 });
              }
              ElMessage({
                message: '登录成功',
                type: 'success',
              })
              router.push('index');
            },err=>{
              if (err.code===400){
                ElMessage({
                  message: err.message,
                  type: 'warning',
                })
              }
            })
          }else{
            ElMessage({type:'warning',message:'请勾选同意隐私政策和用户注册协议'})
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    //忘记密码
    const ForgotPassword = () =>{
      isForgotPassword.value = true
    }

    let toYszc = () =>{
      window.open('https://pta.ccwtech.net/privacy.html')
    }

    let toZcxy = () =>{
      window.open('https://pta.ccwtech.net/register.html')
    }

    let iosDown = () =>{
      window.open('https://apps.apple.com/cn/app/%E8%B4%A2%E6%89%8D%E4%BA%91%E6%95%99%E8%82%B2/id1618896507')
    }

    let azDown =() =>{
      window.open('https://shouji.baidu.com/app/5000677955')
    }

    return{
      iosDown,
      azDown,
      toZcxy,
      toYszc,
      privacyPolicy,
      labelPosition,
      loginForm,
      radio1,
      checked1,
      LoginRules,
      loginSubmit,
      ruleFormRef,
      ForgotPassword,
      isForgotPassword,
      done

    }
  },
  components:{
    IndexFooter,
    ForgotPasswordComponent,
    IndexHeader
  }
}
</script>

<style scoped>
  .privacyPolicyDiv{
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-weight: 400;
  }
.dialog-footer button:first-child {
  margin-right: 10px;
}

.login-form-div .title{
  color: rgba(0, 11, 51, 1);
  letter-spacing: -0.5px;
  font-size: 2rem;
  padding: 2.5rem;
}
.login-form-div .form{
  width: 80%;
}
.login-model{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.login-model .nopwd{
  margin-right: 1rem;
  cursor: pointer;
  color: #606266;
}
.login-model .login-button{
  width:7.375rem;
  height: 2.5rem;
}
.login{
  width: 100%;
  height: 130.6875rem;
}
.login-header{
  width: 100%;
  background: rgba(255, 255, 255, 1);
  position: relative;
}
.login-bg{
  width: 100%;
  height: 880px;
  background-size: cover;
  background-image: url("../../assets/index/bg.jpg");
  background-repeat: no-repeat;
}
.left-bg{
  position: absolute;
  top: 5.6875rem;
  left: 1.75rem;
  width: 14.25rem;
  height: 14.25rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.login-header-title{
  width: 39.125rem;
  height: 7.9375rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.login-header-title .small-text{
  width: 34.8125rem;
  height: 2.0625rem;
  display: flex;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.5rem;
  position: absolute;
  top: 10.625rem;
  right: 10.625rem;
}
.login-header-title .big-text{
  margin-top: 2.0625rem;
  width: 33.5625rem;
  height: 5.125rem;
  display: flex;
  color: rgba(255, 255, 255, 1);
  letter-spacing: -0.42px;
  font-size: 3.75rem;
  position: absolute;
  top: 12.6875rem;
  right: 11.875rem;
}
.right-bg-big{
  position: absolute;
  top: 18rem;
  right: 9.9375rem;
  width: 38.75rem;
  height: 38.75rem;
  background-image: url("https://img.js.design/assets/img/61a84081b65a297e35b8b686.png");
  background-size: contain;
}
.login-form-div{
  width: 30.5625rem;
  height: 35.5rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 40px rgba(43, 89, 255, 0.08);
  border-radius: 0.625rem;
  position: absolute;
  top: 10.625rem;
  left: 7.5625rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.login-section{
  width: 100%;
  height: 50.3125rem;
  margin-top: 3.375rem;
  background: rgba(255, 255, 255, 1);
  position: relative;
}
.login-section .bg-round{
  border-radius: 50%;
  width: 31.1875rem;
  height: 31.1875rem;
  background: linear-gradient(90deg, rgba(140, 48, 245, 1) 0%, rgba(255, 75, 92, 1) 100%);
  position: absolute;
  top: 11.375rem;
  left: 11.375rem;
  position: relative;
}
.login-section .bg-round .bg-phone{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 681px;
  height: 42.1875rem;
  transform: translate(-50%,-50%);
  background-size: contain;
  background-image: url("../../assets/login/phone.png");
  background-repeat: no-repeat;
  background-position-x: center;
}
.login-section .right-title{
  position: absolute;
  top: 7.125rem;
  right: 14.25rem;
}

.login-section .big-title{
  margin-top: 1.6875rem;
  margin-bottom: 1.8125rem;
  display: flex;
  align-items: center;
}

.login-section .big-title > p{
  color: rgba(0, 11, 51, 1);
  letter-spacing: -0.38px;
  font-size: 2.25rem;
  line-height: 3.0625rem;
}
.login-section .big-title .big{
  font-size: 30px;
  font-weight: 400;
}
.login-section .big-title .small{
  font-size: 20px;
  font-weight: 400;
}

.login-section .small-text{
  width: 31rem;
  height: 9.625rem;
  margin-bottom: 3.0625rem;
}

.login-section .small-text > p{
  color: rgba(0, 11, 51, 1);
  font-size: 1rem;
  line-height: 2.75rem;
}
.app-download{
  margin-top: 2rem;
  width: 9.375rem;
  height: 3.125rem;
  background: rgba(253, 76, 92, 1);
  border-radius: 3px;
}

</style>

<style>
.login-form-div .form .el-input__wrapper{
  height: 2.5rem;
}
.login-form-div .form .el-form-item__label{
  font-size: 1rem;
}
</style>
